<template>
    <div style="background-color: #ebeef3" v-for="item in Details" :key="item.doctor_id">
      <div>
        <van-nav-bar style="background-color: #2894ff">
          <template #left>
            <div @click="onClickLeft" style="color: white">
              <van-icon name="arrow-left" size="18" color="#fff"></van-icon>
              <span style="font-size: 18px; line-height: 20px">快速资询</span>
            </div>
          </template>
        </van-nav-bar>
      </div>
      <div style="color: gainsboro;overflow: scroll;">
        <div id="xxx">
        <van-divider>以下为AI人工接待</van-divider>

        <div style="display: flex; padding: 8px 13px;"  v-if="item.user!=1">
          <div>
            <img src="../../assets/mypic/AI.png" style="border-radius: 50%;width: 35px;" />
          </div>
          <div style="color: black">
            <span style="line-height: 31px">医生助手</span>
            <div style="
                  background-color: #ffffff;
                  padding: 10px;
                  font-size: 14px;
                  width: 290px;
                  border-radius: 0 8px 8px;
                  line-height: 2;
                ">
              <span>您好:请用<span style="font-weight: bolder">(5-200字)</span>这里是AI人工智能服务。</span>
            </div>
            <div style="
                  background-color: #ffffff;
                  padding: 10px;
                  margin-top: 10px;
                  font-size: 14px;
                  width: 290px;
                  border-radius: 0 8px 8px;
                  line-height: 2;
                ">
              <span>您可以这样问:<br>小朋友5岁,发烧体温38.5°C,伴有鼻塞咳嗽,已经持续2天。请问医院该怎么处理,需不需要去医院?</span>
            </div>
          </div>
        </div>
          <div v-for="item in conments">
            <div :style="kw ? 'display:flex' : 'display:none'"  v-if="item.user!=1">
          <div>
            <img src="../../assets/mypic/dian.jpg" style="border-radius: 50%" />
          </div>
          <div style="color: black">
            <span style="line-height: 31px">医生助手</span>
            <div style="
                  background-color: #ffffff;
                  padding: 10px;
                  margin-top: 10px;
                  font-size: 14px;
                  width: 290px;
                  border-radius: 0 8px 8px;
                  line-height: 2;
                ">
              <span>{{ item.info1}}</span>
            </div>
          </div>
        </div>
            <div style="display: flex; padding: 8px 13px;justify-content: space-between;" v-else>
              <div style="color: black;" id="111">
                <span style="line-height: 31px;display: inline-block;width: 100%;margin-left: 274px;">用户1</span>
                <div style="
                      background-color: #ffffff;
                      padding: 10px;
                      width: 290px;
                      font-size: 14px;
                      border-radius: 8px 0px 8px 8px;
                      line-height: 2;
                    ">
                  <span>{{ item.info }}</span>
                </div>
              </div>
              <div>
                <img src="../../assets/mypic/user.webp" style="border-radius: 50%;width: 35px;" />
              </div>
            </div>
          </div>
        </div>
        <div style="margin-top: 50px">
          <div style="color: black; background-color: #f9f9f9">
            <span style="
                  display: inline-block;
                  transform: scale(0.9);
                  flex-wrap: nowrap;
                "><van-icon name="info-o" /><span>您可以与医生沟通10次,以下内容将作为第1次提问</span></span>
          </div>
          <div style="
                display: flex;
                justify-content: space-between;
                padding: 20px;
                position: relative;
              ">
            <textarea v-model="content" style="border-radius: 8px; color: black;resize: none;" cols="35" rows="7" placeholder="医生您好,我的情况如下:
    [症状+多久了]:"></textarea>
            <div style="
                  color: gray;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                  font-weight: bolder;
                ">
              <div>
                <van-icon size="30px" color="gray" name="add-o" />
                <p>照片</p>
              </div>
              <div @click="gggg">
                <van-icon color="#0594fd" size="30px" name="upgrade" />
                <p style="color: #0594fd">发送</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      </div>
  </template>
  <script setup lang="ts">
  import { useRouter, useRoute } from 'vue-router';
import httpApi from '@/http';
import useWebSocket  from '@/hook/websocket.js';
import { ref, onMounted, reactive } from 'vue';
const kw = ref(false)
const route = useRoute()
let content = reactive<any>("")
const doctor_id = route.params.doctor_id
console.log(doctor_id);
const onClickLeft = () => history.back();
const active = ref(0);
const Details = reactive<any[]>([])
const value = ref(0);
const info1 = reactive<any>('')
  let conments = reactive<any[]>([{
    user:2,
    info:info1
  }
  ])
  const a={
    user:1,
    info:content
  }
  const gggg = function(){
  if(content==''){return}
  conments.push({user:1,info:content})
  console.log('2552',a.info);
  // content：发送的消息
  console.log(1111,content);
  ws.send(content.toString())
  content =''
}
  const handleMessage = function(e:any){
  console.log('服务器端消息',e.data);
  let info1 = e.data
  if(info1!=''){kw.value=true}
  conments.push({user:2,info1})
  console.log(info1,'1111111111111111111');
  console.log(conments,11111);
  conments.splice(0,1)
}
const ws = useWebSocket(handleMessage)
  onMounted(() => {
    httpApi.DoctorApi.selectById({ doctor_id }).then(res => {
      console.log('加载的内容', res);
      Details.push(...res.data.data)
      console.log(Details);
    })
  })
  </script>
  
  <style scoped lang="scss">
  @import url("//at.alicdn.com/t/c/font_3903304_e3wrhqcw3ce.css");
  
  p {
    margin: 0px;
  }
  
  i {
    &:before {
      font-size: 16px;
    }
  }
  
  .van-icon-add-o:before {
    content: "\e662";
    font-size: 30px;
  }
  
  .van-icon-upgrade:before {
    content: "\e732";
    font-size: 30px;
  }
  </style>